<script setup lang="ts" >
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

import { computed, PropType, ref } from 'vue'

const props = defineProps({
  previewFile: {
    type: Object as PropType<File | null>,
    default: () => null,
  }
})

const src = computed(() => {
  if (props.previewFile) {
    const url = URL.createObjectURL(props.previewFile)
    console.log('url', url);
    return url
  }
  return ''
})

const type = computed(() => {
  if (props.previewFile) {
    return props.previewFile.name.split('.')[1]
  }
})

// 渲染完成
function renderedHandler() {
	console.log('渲染完成')
}

// 渲染失败
function errorHandler() {
	console.log('渲染失败')
}
</script>
<template>
  <!-- <div class="button">
    <button @click="getFile">docx</button>
    <button @click="getPdf">pdf</button>
  </div> -->
	<div class="vue-office">
		<vue-office-docx v-if="type=== 'docx'" :src="src" @rendered="renderedHandler" @error="errorHandler" />
		<vue-office-pdf v-if="type=== 'pdf'"  :src="src" style="height: 100%" @rendered="renderedHandler" @error="errorHandler" />
	</div>
</template>
<style lang="scss">
.vue-office{
	width: 100%;
  height: 100%;
  overflow-y: auto;
	margin: 0 auto;
	
  .vue-office-docx {
    .docx-wrapper {
      padding: 0 !important;
      background-color: transparent !important;
      & > section.docx {
        width: 100% !important;
        padding: 20px 0 !important;
      }
    }
  }
  .vue-office-pdf {
    .vue-office-pdf-wrapper {
      background: transparent !important;
      padding: 0 !important;
      background-color: transparent !important;
    }
  }
}
</style>
